import { useState, FC, useEffect } from "react";
import Child from "./component/Child";

export interface ItemType {
  num: number;
}

// FC表示函数组件的类型
const Index: FC = () => {
  // useState的类型是通过泛型进行传入
  const [count, setCount] = useState<number | string>(1);

  // 函数返回值的类型加上
  const add = (): void => {
    setCount(100);
  };

  const minus = (): void => {
    setCount(200);
  };

  const add2 = () => {
    setCount("hello");
  };

  useEffect(() => {
    console.log(123);
  }, []);

  const [list] = useState<ItemType[]>([
    {
      num: 1,
    },
    {
      num: 2,
    },
    {
      num: 3,
    },
  ]);

  return (
    <>
      <h2>ts</h2>
      <button onClick={minus}>-</button>
      <span>{count}</span>
      <button onClick={add}>+</button>
      <button onClick={add2}>+</button>

      <ul>
        {list.map((item) => {
          return <li key={item.num}>{item.num}</li>;
        })}
      </ul>

      <hr />

      <Child count={count} list={list} onAdd={add} />
    </>
  );
};

export default Index;
